<template>
  <div class="w-full h-full bg-[#F2F4F5] text-[16px]">
    <div class="max-w-[1440px] pt-[30px] px-[30px] bg-white" style="margin: 0 auto">
      <div class="w-full flex flex-col justify-center items-center">
        <div class="text-[20px] font-bold">{{ Info.data.name }}</div>
        <div class="mt-[15px] mb-[30px] text-[14px]">由{{ Info.data.brand }}承保</div>
      </div>
      <div>
        <el-form
          :model="formData"
          ref="formRef"
          :rules="rules"
          label-width="7vw"
          :inline="false"
          label-position="left"
        >
          <el-form-item label="保险期间" prop="name">
            <div class="flex items-center text-[14px]">
              <div class="text-[16px]">自</div>
              <div
                class="w-[130px] h-[30px] border border-[#BEBEBE] rounded-[4px] ml-[10px] flex items-center justify-center"
              >
                <el-date-picker
                  :disabled-date="disabledDate1"
                  v-model="param.start_time"
                  :clearable="false"
                  type="date"
                  value-format="x"
                  @change="pickerChange($event, 1)"
                />
              </div>
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                00
              </div>
              ：
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                00
              </div>
              ：
              <div
                class="w-[40px] h-[30px] bg-[#FBFBFB] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                00
              </div>
              <div class="ml-[10px] text-[16px]">起</div>
              <div class="ml-[15px] text-[16px]">至</div>
              <div
                class="w-[130px] h-[30px] border border-[#BEBEBE] rounded-[4px] ml-[10px] flex items-center justify-center"
              >
                <el-date-picker
                  v-model="param.end_time"
                  type="date"
                  :disabled-date="disabledDate2"
                  :disabled="!param.start_time"
                  value-format="x"
                  @change="pickerChange($event, 2)"
                />
              </div>
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                23
              </div>
              ：
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                59
              </div>
              ：
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                59
              </div>
              <div class="ml-[10px] text-[16px]">止</div>
              <div class="ml-[10px] text-[16px]">至</div>
              <div
                class="mx-[10px] w-[50px] h-[30px] border border-[#BEBEBE] rounded-[4px] flex justify-center items-center"
              >
                <!-- {{ days < 0 ? 0 : days }} -->
                <el-input v-model="days" @input="daysInput" @blur="daysBlur"></el-input>
              </div>
              <div class="text-[16px]">天</div>
            </div>
          </el-form-item>
          <div class="w-full border-b border-[#ECECEC] mt-[30px]"></div>
          <!-- 
投保人信息（主被保人） -->
          <baoItem1
            :cardTypeTwo="Info.data.cardTypeTwo"
            :addInfo="param"
            :cardType="Info.data.cardType"
            :insure="param.insure"
            ref="baoItem1Ref"
          ></baoItem1>

          <!-- 附加被保人 -->
          <div class="w-full border-b border-[#ECECEC] mt-[15px]"></div>
          <baoItem2
            ref="baoItem2Ref"
            :cardTypeOne="Info.data.cardTypeOne"
            :cardTypeTwo="Info.data.cardTypeTwo"
            :nature="Info.data.nature"
            :insured="param.insured"
            :param="param"
            @getChildrenData="getChildrenData"
          >
          </baoItem2>
          <div
            v-if="route.query.id == 2"
            class="w-full border-b border-[#ECECEC] mt-[15px]"
          ></div>
          <!-- 标的要素 -->
          <elementItem
            @handleProvinceSelect="handleProvinceSelect"
            @getAddress="getAddress"
            @handleCitySelect="handleCitySelect"
            @handleAreaSelect="handleAreaSelect"
            :treetop="param.treetop"
            :fananList="Info.data.fanan"
            @pickerChange="pickerChange"
            @inputChange="inputChange"
            ref="elementItemRef"
          >
          </elementItem>
          <div class="w-full border-b border-[#ECECEC] mt-[30px]"></div>
          <!-- 保险责任 -->
          <responsibility
            :start_time="param.start_time"
            :end_time="param.end_time"
            :duty="Info.data.duty"
            :param="param"
            @change="change"
            @optionClick="optionClick"
            ref="responsibilityRef"
            :personCost="personCost"
          >
          </responsibility>
          <div class="w-full border-b border-[#ECECEC] mt-[30px]"></div>
          <!-- 上传文件 -->
          <!-- <upload ref="uploadRef"></upload> -->
          <!-- 被保人清单 -->
          <!-- <detailedList
            ref="detailedListRef"
            :user="param.user"
            :userCardType="Info.data.userCardType"
          ></detailedList> -->
          <div
            class="w-full h-[110px] flex items-center px-[35px] mt-[60px] justify-between"
            style="box-shadow: 0px -3px 8px 0px rgba(143, 143, 143, 0.05)"
          >
            <div>
              <span class="text-[16px]">保费：</span>
              <span class="text-[16px] text-[#EF6800]">￥</span>
              <span class="text-[30px] text-[#EF6800]">{{ cost.toFixed(2) }}</span>
              <span class="text-[16px]">元</span>
            </div>
            <div class="flex items-center">
              <div
                @click="openBjsDia"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] bg-[#EF6800] cursor-pointer"
              >
                报价书
              </div>
              <div
                @click="sublit(formRef, '1')"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] ml-[20px] bg-[#EF6800] cursor-pointer"
              >
                暂存订单
              </div>
              <div
                @click="sublit(formRef, '0')"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] ml-[20px] bg-[#EF6800] cursor-pointer"
              >
                提交核保
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
  <div>
    <!-- 投保须知弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <div
          class="w-full h-[50px] relative flex justify-center items-center bg-[#F5F5F5]"
        >
          <div class="text-[16px]">投保须知</div>
          <div
            @click="router.push('/index/home')"
            class="w-[12px] h-[12px] absolute top-[16px] right-[30px] cursor-pointer"
          >
            <el-image
              :src="getAssetsFile('home/close.png')"
              class="w-full h-full"
            ></el-image>
          </div>
        </div>
      </template>
      <div class="p-[30px]" v-html="Info.data.notice ? Info.data.notice : ''"></div>

      <div class="w-full pb-[30px] flex flex-col items-center">
        <div class="w-full flex items-center justify-center">
          <div
            @click="checkedShow = !checkedShow"
            class="flex items-center justify-center"
            :style="
              dialogTime > 0
                ? 'cursor: default;pointer-events: none;'
                : 'cursor: pointer;pointer-events: auto;'
            "
          >
            <el-image
              v-if="checkedShow"
              :src="getAssetsFile('home/active.png')"
              class="w-[18px] h-[18px]"
            ></el-image>
            <el-image
              v-else
              :src="getAssetsFile('home/noactive.png')"
              class="w-[18px] h-[18px]"
            ></el-image>
          </div>
          <span class="ml-[10px] text-[16px]">已阅读并已详尽知晓上述内容 </span>
          <span v-if="dialogTime">（{{ dialogTime }}s）</span>
        </div>
        <div class="mt-[30px]">
          <el-button
            @click="closeXzDialog"
            color="#EF6800"
            :dark="true"
            class="w-[240px]"
            size="large"
            :disabled="dialogTime ? true : false"
            ><span class="text-white">我已全部阅读</span></el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
  <div>
    <!-- 报价书 -->
    <el-dialog
      v-model="dialogBjsShow"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <div class="w-full h-[50px] relative flex justify-center items-center bg-white">
          <div class="text-[16px]">报价书</div>
          <div
            @click="dialogBjsShow = false"
            class="w-[12px] h-[12px] absolute top-[16px] right-[30px] cursor-pointer"
          >
            <el-image
              :src="getAssetsFile('home/close.png')"
              class="w-full h-full"
            ></el-image>
          </div>
        </div>
      </template>
      <div class="p-[20px] bg-[#F5F5F5]" id="save">
        <div class="w-full bg-white rounded-[10px] py-[30px]">
          <div class="w-full text-center text-[20px] font-bold mb-[20px]">
            {{ param.insure.name }}
          </div>
          <div class="w-full items-center justify-around flex">
            <div class="flex justify-center items-center flex-col">
              <div class="text-[16px] text-[#535353]">产品名称</div>
              <div class="mt-[20px] text-[#EF6800] text-[20px] font-bold">
                {{ Info.data.name }}
              </div>
            </div>
            <div class="flex justify-center items-center flex-col">
              <div class="text-[16px] text-[#535353]">保费</div>
              <div class="mt-[20px] text-[#EF6800] text-[20px] font-bold">
                ￥ {{ cost.toFixed(2) }}
              </div>
            </div>
            <div class="flex justify-center items-center flex-col">
              <div class="text-[16px] text-[#535353]">保险期限</div>
              <div class="mt-[20px] text-[#EF6800] text-[20px] font-bold">
                {{ days }}
              </div>
            </div>
          </div>
        </div>
        <div class="w-full bg-white rounded-[10px] py-[30px] px-[20px] mt-[10px]">
          <div class="mb-[20px]">保险期限</div>
          <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>开始时间</div>
            <div>{{ start_date }}</div>
          </div>
          <div class="flex justify-between items-center w-full text-[#535353]">
            <div>结束时间</div>
            <div>{{ end_date }}</div>
          </div>
        </div>
        <div class="w-full bg-white rounded-[10px] py-[30px] px-[20px] mt-[10px]">
          <div class="">标的要素</div>
          <!-- <div class="mt-[30px] mb-[20px] bg-[#EF6800] w-full h-[1px]"></div> -->
          <!-- <div class="flex justify-between items-center w-full text-[#535353] mt-[20px] mb-[20px]">
            <div>投保年龄</div>
            <div>16周岁-65周岁</div>
          </div> -->
          <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>项目名称</div>
            <div>{{ param.treetop.name }}</div>
          </div>
          <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>项目造价</div>
            <div>{{ param.treetop.price }}</div>
          </div>
          <div class="flex justify-between items-center w-full text-[#535353]">
            <div>详细地址</div>
            <div class="flex">
              <div class="mr-[10px]">{{ param.treetop.address }}</div>
              <div>{{ param.treetop.room_no }}</div>
            </div>
          </div>
        </div>
        <div class="w-full bg-white rounded-[10px] py-[30px] px-[20px] mt-[10px]">
          <div class="">保险责任</div>
          <!-- <div class="mt-[30px] mb-[20px] bg-[#EF6800] w-full h-[1px]"></div> -->
          <div
            v-for="item in param.duty"
            class="flex justify-between items-center w-full text-[#535353] mt-[20px]"
          >
            <div v-if="item.money">{{ item.title }}</div>
            <div v-if="item.money">{{ item.money }}{{ item.unit }}</div>
          </div>
        </div>
        <div class="w-full bg-white rounded-[10px] py-[30px] px-[20px] mt-[10px]">
          <!-- <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>加费</div>
            <div>{{ param.add_price }}</div>
          </div> -->
          <!-- <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>个人保费</div>
            <div>
              {{ personCost.toFixed(2) }}
            </div>
          </div>
          <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>被保人数</div>
            <div v-if="param.user">
              {{ param.user.length }}
            </div>
            <div v-else>
              {{ 1 }}
            </div>
          </div> -->
          <div class="flex justify-between items-center w-full text-[#535353]">
            <div>总保费</div>
            <div>{{ Number(cost).toFixed(2) }}</div>
          </div>
        </div>
      </div>

      <div class="w-full h-[78px] flex justify-center items-center">
        <div
          @click="dialogBjsShow = false"
          class="w-[86px] h-[30px] flex justify-center items-center bg-[#DDDDDD] rounded-[4px] text-white cursor-pointer"
        >
          关闭
        </div>
        <div
          @click="saveImage"
          class="w-[86px] h-[30px] flex justify-center items-center bg-[#EF6800] rounded-[4px] text-white ml-[70px] cursor-pointer"
        >
          保存
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import type { FormRules, FormInstance } from "element-plus";
import html2canvas from "html2canvas";
import getAssetsFile from "@/utils/getImageurl.ts";
import { regionData } from "element-china-area-data";
import { reactive, computed, ComputedRef, ref, watchEffect, inject } from "vue";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
import responsibility from "./responsibility.vue";
import upload from "./upload.vue";
import baoItem2 from "./baoItem2.vue";
import baoItem1 from "./baoItem1.vue";
import elementItem from "./element.vue";
import detailedList from "./detailedList.vue";
import { getInsureInfo, addOrder, orderDetail } from "@/utils/api";
import * as rrweb from "rrweb";
import { listenerHandler } from "_@rrweb_types@2.0.0-alpha.16@@rrweb/types";
const route = useRoute();
const router = useRouter();
const formData = reactive({
  name: "11",
  startTime: 0,
  endTimer: 0,
});
const fananCost = ref("");
const message = inject<any>("message");
const startTime = ref("");
const cost = ref(0);
const dialogVisible = ref(false);
const Info = reactive({ data: {} as infoType });
const personCost = ref<number>(0); //个人保费
const dialogHtml = ref(""); //投保须知富文本
const checkedShow = ref(false); //是否勾选阅读
const dialogBjsShow = ref(false); //报价书弹窗\
const detailedListRef = ref<InstanceType<typeof detailedList>>();
const uploadRef = ref<InstanceType<typeof upload>>();
const responsibilityRef = ref<InstanceType<typeof responsibility>>();
const elementItemRef = ref<InstanceType<typeof elementItem>>();
const baoItem2Ref = ref<InstanceType<typeof baoItem2>>();
const baoItem1Ref = ref<InstanceType<typeof baoItem1>>();
const formRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  name: [{ required: true, message: "Please input Activity name", trigger: "blur" }],
});
const fananIndex = ref(0);
const days = ref(0);
const pickerIndex = ref();
const dialogTime = ref(5); //弹框的倒计时
const param = reactive({
  id: 0,
  bx_id: 0, //保险id
  start_time: 0, //开始时间
  end_time: 0, //结束时间
  insure: {
    name: "", //投保人名称
    card_type: "", //投保人证件类型
    card_no: "", //投保人证件号
    contact: "", //投保人联系人
    contact_mobile: "", //投保人联系人手机号
    mailbox: "", //邮箱
    address: "",
  },
  insured: [],
  treetop: {
    name: "",
    price: "",
    start_date: "",
    end_date: "",
    area_num: "",
    province: "",
    city: "",
    area: "",
    province_code: "",
    city_code: "",
    area_code: "",
    address: "",
    room_no: "",
  },
  duty: [] as any[],
  annex: [],
  user: [],
  card_type: "",
  add_price: "",
  is_show: "",
  mark: [],
}) as any;
const start_date = ref("");
const end_date = ref("");
watchEffect(() => {
  // if (param) {
  //   days.value = Math.floor(
  //     (param.end_time - param.start_time) / (1000 * 3600 * 24)
  //   );
  // }
});
let stopFun: listenerHandler | undefined;
onBeforeRouteLeave(() => {
  if (stopFun) {
    stopFun();
  }
  param.mark = [];
});
//开始录制
const player = () => {
  let stop = rrweb.record({
    emit(event: any) {
      param.mark.push(event);
    },
  });
  stopFun = stop;
};
player();
const inputChange = (end: any, v: any) => {
  param.end_time = end;
  days.value = v;
  countCost(fananCost.value);
};

//禁用开始时间
const disabledDate1 = (time: Date) => {
  // 1是开始时间 2是结束时间
  return time.getTime() < Date.now();
  // console.log(time);

  //return false;
};
//禁用结束时间
const disabledDate2 = (time: Date) => {
  return time.getTime() < Date.now() + 1000 * 3600 * 24 * 2;
};
//获取当前时间
const getDate = () => {
  let date = new Date();

  let year = date.getFullYear(); //获取完整的年份(4位)
  let month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  let strDate = date.getDate(); // 获取当前日(1-31)

  let data = year + "-" + month + "-" + strDate;

  // startTimer.value = year + "-" + month + "-" + strDate;

  return new Date(data).getTime();
};
//获取页面数据
const getData = async () => {
  if (route.query.id && !route.query.order_id) {
    const res = await getInsureInfo({ id: route.query.id });
    Info.data = res.msg;
    fananCost.value = res.msg.duty[0].price;

    param.start_time = getDate() + 1000 * 60 * 60 * 24;

    param.treetop.start_date = setDate(param.start_time);
    start_date.value = setDate(param.start_time);
    end_date.value = setDate(param.end_time);
    dialogVisible.value = true;
    Info.data.duty[1].data.forEach((item: any, index: number) => {
      if (index != 0) {
        item["disabled"] = true;
      }
    });

    // param.treetop.end_date = setDate(param.end_time);
    //countCost(fananCost.value);

    // console.log(param.start_time);
  } else {
    //详情页
    const res = await orderDetail({ id: route.query.order_id });

    Info.data = res.msg.bx_info;
    Info.data.duty = res.msg.duty;
    param.start_time = res.msg.start_time;
    param.end_time = res.msg.end_time;

    param.insure = res.msg.insure;
    param.insured = res.msg.insured;
    param.treetop = res.msg.treetop;

    param.user = res.msg.user;
    param.treetop.start_date = setDate(param.start_time);
    param.treetop.end_date = setDate(param.end_time);
    // address.province = res.msg.treetop.province;
    // console.log(res.msg);
  }
};
getData();
//根据时间戳转年月日
const setDate = (value: number) => {
  let date = new Date(value);
  let y: any;
  let m: any;
  let d: any;
  y = date.getFullYear();
  m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  d = date.getDate();
  d = d < 10 ? "0" + d : d;
  let dates = y + "-" + m + "-" + d;

  return dates;
};
const change = (value: Array<any>) => {
  fananCost.value = value[0].price; //方案保费
  if (days.value < 3) {
    message.warning("保险期间最少为3天");
  } else {
    countCost(fananCost.value);
  }
};
//计算保费
const countCost = (price: string) => {
  let rate = "10";
  // console.log(price);

  // switch (price) {
  //   case "330.00":
  //     rate = "10";
  //     break;
  //   case "440.00":
  //     rate = "15";
  //     break;
  //   case "550.00":
  //     rate = "20";
  //     break;
  // }
  cost.value = Number(price) + (days.value - 3) * Number(rate) + Number(param.add_price);
  personCost.value = Number(price) + (days.value - 3) * Number(rate);
};
//时间
const pickerChange = (v: any, i: number) => {
  //i 1是开始时间 2是结束时间
  if (i == 1) {
    param.start_time = v;
    if (days.value) {
      param.end_time = param.start_time + (days.value - 1) * 1000 * 3600 * 24;
      // console.log(days.value);
    }
    param.treetop.start_date = setDate(param.start_time);
    param.treetop.end_date = setDate(param.end_time);
  } else {
    param.end_time = v;

    days.value = Math.floor(
      (param.end_time - param.start_time + 1000 * 3600 * 24) / (1000 * 3600 * 24)
    );
    // param.treetop.age = String(days.value);
    param.treetop.end_date = setDate(param.end_time);
  }

  if (days.value >= 3) {
    countCost(fananCost.value);
  }
  start_date.value = setDate(param.start_time);
  end_date.value = setDate(param.end_time);
  pickerIndex.value = i;
};
const daysInput = () => {
  if (!param.start_time) {
    param.start_time =
      Number(new Date(new Date().setHours(0, 0, 0, 0))) + 1000 * 60 * 60 * 24;
  }
  param.end_time = param.start_time + (days.value - 1) * 1000 * 3600 * 24;
  param.treetop.end_date = setDate(param.end_time);
  start_date.value = setDate(param.start_time);
  end_date.value = setDate(param.end_time);
  countCost(fananCost.value);
};
//失去焦点触发
const daysBlur = () => {
  if (days.value < 3) {
    message.warning("保险时间最少为3天");
  }
};
//子组件选择方案是调用
const optionClick = (index: number, list: Array<any>) => {
  fananIndex.value = index;
  fananCost.value = list[0].price;

  countCost(fananCost.value);
};
//获取子组件数据
const getChildrenData = () => {
  let insured = baoItem2Ref.value?.list; //附加被投保人信息
  param.id = route.query.order_id;
  param.bx_id = route.query.id;
  param.insure = baoItem1Ref.value?.Info as any;
  param.insured = insured as any;
  param.treetop = elementItemRef.value?.Info as any;
  param.duty = responsibilityRef.value?.list as any;
  param.annex = uploadRef.value?.uploadList as any;
  param.user = detailedListRef.value?.list as any;
};
//打开报价书
const openBjsDia = () => {
  dialogBjsShow.value = true;
  getChildrenData();
};
const sublit = async (_: FormInstance | undefined, index: string) => {
  //baoItem1Ref.value?.Info 投保人
  getChildrenData();
  param.is_show = index;
  if (stopFun) {
    stopFun();
  }
  if (param.treetop.name.length < 6) {
    message.warning("工程名称最少为六个汉字");
    return;
  }
  if (Number(param.treetop.price) > 300000) {
    message.warning("工程造价不能超过三十万");
    return;
  }
  if (param.treetop.address.length < 5) {
    message.warning("施工详细地址不得少于五个字");
    return;
  }
  // if (!e) return;
  // await e.validate((valid, err) => {
  //   if (valid) {
  //     console.log("submit!");
  //   } else {
  //     console.log(err);
  //   }
  // });
  // console.log(param);

  const res = await addOrder(param);
  if (res.code == 1) {
    message.success("提交成功");

    if (index == "0") {
      router.replace("/index/zz_jgyq/pay?order_id=" + res.msg + "&id=" + route.query.id);
      // router.push(
      //   "/index/detail/pay?order_id=" + res.msg + "&id=" + route.query.id
      // );
    } else if (index == "1") {
      router.push("/index/person/orderPay?type=0&parentIndex=0");
    }
  } else {
    message.warning(res.msg);
  }
  let order_id = res.msg;
  // console.log(res);
};

const address = reactive<{
  province: string;
  city: string;
  area: string;
}>({
  province: "",
  city: "",
  area: "",
});
interface AreaList {
  value: string;
  label: string;
  children?: AreaList[];
}
//切换省份函数
const handleProvinceSelect = () => {
  address.city = "";
  address.area = "";
};
const getAddress = ({
  name,
}: {
  code: string[];
  name: string[];
  isComplete: boolean;
}) => {
  console.log(name);
};
//切换城市函数
const handleCitySelect = () => {
  address.area = "";
};
//切换地区函数
const handleAreaSelect = () => {};
//二级城市列表
const cityList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!address.province) {
    return [];
  }
  let temp = regionData.find((item: any) => {
    return item.value == address.province;
  });

  return temp!.children ? temp!.children : [];
});
const areaList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!address.province || !address.city) {
    return [];
  }
  if (cityList.value.length == 0) {
    return [];
  } else {
    let temp = cityList.value.find((item: any) => {
      return item.value == address.city;
    });
    if (temp) {
      return temp.children ? temp.children : [];
    } else {
      return [];
    }
  }
});

//倒计时
const countDown = () => {
  let t = setInterval(() => {
    dialogTime.value--;
    if (dialogTime.value <= 0) {
      clearInterval(t);
    }
  }, 1000);
};
countDown();

/** html转base64 */
const saveImage = () => {
  html2canvas(<HTMLElement>document.querySelector("#save"), {
    useCORS: true,
  }).then((canvas: any) => {
    const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, "");
    const base64img = `data:image/png;base64,${base64}`;
    downloadBase64(base64img, "下载图片");
  });
};
/** 下载图片 */
const downloadBase64 = (content: string, fileName: string) => {
  var base64ToBlob = function (code: any) {
    let parts = code.split(";base64,");
    let contentType = parts[0].split(":")[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {
      type: contentType,
    });
  };
  let aLink = document.createElement("a");
  let blob = base64ToBlob(content);
  aLink.download = fileName + ".png";
  aLink.href = URL.createObjectURL(blob);
  aLink.click();
};
//关闭弹窗须知
const closeXzDialog = () => {
  if (!checkedShow.value) return;
  dialogVisible.value = false;
};
</script>
<style scoped lang="scss">
:deep(.el-dialog__header) {
  padding: 0 !important;
  margin: 0 !important;
}

:deep(.el-dialog__body) {
  margin: 0 !important;
  padding: 0 !important;
}

:deep(.el-input__inner) {
  color: black !important;
}

:deep(.el-dialog) {
  padding: 0 !important;
}
</style>
